<template>
	<view class="content">
		<view class="log-head">
			<view class="up">
				<view class="">
					总收益(元)
				</view>
				<view class="total">
					{{total}}
				</view>
				<!-- <view v-if="jiankong == 2" class="jankong" @tap="toJiankong">
					<view class="btn-jiankong">监控</view>
				</view> -->
			</view>
			<view class="down">
				<view class="left">
					<view class="">
						昨日收益
					</view>
					<view class="" style="display: flex;justify-content: center;">
						¥{{yestoady}}
					</view>
				</view>
				<view class="right">
					<view class="">
						历史最高
					</view>
					<view class="" style="display: flex;justify-content: center;">
						¥{{max}}
					</view>
				</view>
			</view>
		</view>
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">收益趋势</view>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
		</view>
		<view class="list">
			<view class="title">
				明细
			</view>
			<view class="info" v-for="(item,index1) in list" :key='index1'>
				<view class="con">
					<view class="">
						{{item.time}}
					</view>
					<view class="">
						贡献收益 {{item.profit}}
					</view>
				</view>
				<view class="money">
					+{{item.profit}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	export default {
	    data() {
	        return {
				total:0,
				max:0,
				yestoady:0,
				list:[],
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				maxY:0,
				minY:0,
				id:'',
				jiankong:1
	        };
	    },
	    onLoad(option) {
			console.log(option)
			this.id = option.id
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);
			this.getLog(option.id)
		},
		onReady() {
			this.getServerData();
		},
	    methods: {
			getLog(id){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getLog')({
					id:id
				}).then(res=>{
					if(res.code == 200){
						this.total = res.data.total_profit
						this.max = res.data.max
						this.yestoady = res.data.yestoday_profit
						this.list = res.data.list
						this.jiankong = res.data.type
						
					}
					uni.hideLoading()
				})
			},
			
			//跳转监控
			/* toJiankong(){
				uni.navigateTo({
					url:`/pages/equipment/jiankong?id=${this.id}`
				})
			}, */
			
			getServerData() {
				this.$api.interfaceApi('getLineEqu')({
					id:this.id
				}).then(res=>{
					if(res.code == 200){
						this.maxY = res.data.max
						this.minY = res.data.min
						_self.fillData(res.data.list);
					}
				})
			},
			
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				let LineA = {
					categories: [],
					series: []
				};
				LineA.categories = data.LineA.categories;
				LineA.series = data.LineA.series;
				this.showLineA("canvasLineA", LineA);
			},
			
			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7,
						scrollShow: false,
						scrollAlign: 'left',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'none',
						splitNumber: 5,
						min: this.minY,
						max: this.maxY,
						format: (val) => {
							return val.toFixed(0) + '元'
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});		
			},
			
			
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
			},
			touchEndLineA(e) {
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
		}
	};
</script>

<style lang="less" scoped>
	.content{

		.log-head{
			background-color: #FFFFFF;
			color: #666666;
			.up{
				height: 230rpx;
				padding: 50rpx 0 0 0;
				box-sizing: border-box;
				view{
					display: flex;
					justify-content: center;
				}
				.total{
					color: #ff0000;
					font-size: 50rpx;
				}
			}
			.jankong{
				margin-top: 20rpx;
				.btn-jiankong{
					width: 100rpx;
					height: 50rpx;
					line-height: 49rpx;
					font-size: 24rpx;
					background-color: #0070e7;
					color: #FFFFFF;
					border-radius: 10rpx;
				}
			}
			
			.down{
				display: flex;
				justify-content: space-between;
				//padding: 0rpx 100rpx;
				border-top: 1rpx solid #e2e2e2;
				
				.left{
					border-right:  1rpx solid #e2e2e2;
					padding:10rpx 120rpx ;
				}
				.right{
					border-right:  1rpx solid #e2e2e2;
					padding:10rpx 120rpx ;
				}
			}
		}
		
		.list{
			background-color: #FFFFFF;
			margin-top: 20rpx;
			color: #666666;
			.title{
				padding: 20rpx 20rpx;
			}
			
			.info{
				display: flex;
				justify-content: space-between;
				padding: 10rpx 20rpx 0 20rpx;
				border-top:  1rpx solid #e2e2e2;
				
				.con{
					font-size: 28rpx;
				}
				
				.money{
					line-height: 90rpx;
					color: #ff0000;
				}
			}
		}
	}
	
	.qiun-padding {
		padding: 2%;
		width: 96%;
	}
	
	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	
	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}
	
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}
	
	.qiun-common-mt {
		margin-top: 10rpx;
	}
	
	.qiun-bg-white {
		background: #FFFFFF;
	}
	
	.qiun-title-bar {
		width: 96%;
		padding: 10rpx 2%;
		flex-wrap: nowrap;
	}
	
	.qiun-title-dot-light {
		border-left: 10rpx solid #0ea391;
		padding-left: 10rpx;
		font-size: 32rpx;
		color: #000000;
	}
	
	/* 通用样式 */
	.qiun-charts {
		/* width: 750rpx; */
		/* width:100%; */
		height: 500rpx;
		background-color: #FFFFFF;
	}
	
	.charts {
		/* width: 750rpx; */
		width:100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}
	
	/* 横屏样式 */
	.qiun-charts-rotate {
		width: 700rpx;
		height: 1100rpx;
		background-color: #FFFFFF;
		padding: 25rpx;
	}
	
	.charts-rotate {
		width: 700rpx;
		height: 1100rpx;
		background-color: #FFFFFF;
	}
	
	/* 圆弧进度样式 */
	.qiun-charts3 {
		/* width: 750rpx;
		width:100%; */
		height: 250rpx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.charts3 {
		position: absolute;
		width: 250rpx;
		height: 250rpx;
		background-color: #FFFFFF;
	}
	
	.qiun-tip {
		display: block;
		width: auto;
		overflow: hidden;
		padding: 15rpx;
		height: 30rpx;
		line-height: 30rpx;
		margin: 10rpx;
		background: #ff9933;
		font-size: 30rpx;
		border-radius: 8rpx;
		justify-content: center;
		text-align: center;
		border: 1px solid #dc7004;
		color: #FFFFFF;
	}
</style>
